<!DOCTYPE html>
<html>
<head>
		
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css"/>
	<link rel="stylesheet" type="text/css" href="css/main.css"/>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript" src="scripts/now.js"></script>
	<script type="text/javascript" src="scripts/jquery.webticker.js"></script>
	<script type="text/javascript" src="scripts/knockout-2.0.0.debug.js"></script>
	<script type="text/javascript" src="scripts/knockout.mapping-latest.js"></script>
	<script type="text/javascript" src="scripts/ko.js"></script>
	
	
	<title>Stock Exhange Emulator</title>	
</head>
<body>

<div id="container" class="ui-widget-content ui-corner-all">
	<div id="header" class="ui-widget-header">
		Welcome <span data-bind="text: username"></span>	
	</div>
	
	<div id="infoBar">
		<fieldset class="ui-corner-all"><legend>Market Info</legend>
			<p> 
				<span data-bind="text: timeMsg">&nbsp;</span><br/>
				<!-- not implemented <span data-bind="text: serverMsg, visible:serverMsg != 'hide'">&nbsp;</span>-->
			</p>
		 	 	
		 	<ul id="webticker" class="initial">
				<li>Loading information - Please wait</li>
				<li>Loading information - Please wait</li>
				<li>Loading information - Please wait</li>
				<li>Loading information - Please wait</li>
			</ul>
			<div id="rslt"></div>
		</fieldset>
	</div>
	
	<div id="portfolio" class="">
		<!-- ACCOUNT-->
		<fieldset class="ui-corner-all"><legend>Your Account</legend>
			<div class="splitParent">
			 	<div class="splitter splitLeft">
			 		<p>Liquid Assets:</p>
					<p>Portfolio Value:</p>
					<p>TOTAL:</p>
					<p>Profit margin:</p>
			 	</div>
			 	<div class="splitter splitRight">
			 		<p><span data-bind="text: pCredit"></span> FMU</p>
					<p><span data-bind="text: pValue"></span> FMU</p>
					<p><span data-bind="text: pTotal"></span> FMU</p>
					<p><span data-bind="text: pMargin"></span></p>	
			 	</div>
			 </div>
		</fieldset>
		
		<!-- PORTFOLIO-->
		<fieldset class="ui-corner-all"><legend>Your Portfolio</legend>
			<form id="portfolio" data-bind="submit: addLine">
	    		<select id="form_addPortf" name="form-addPortf" class="ui-widget-content" data-bind="options: eqList, optionsText: 'name', value: toAdd"></select>
	    		<button data-bind="enable: marketOpen" id="addLineBtn" type="submit" class="btn">Trade</button>
			</form>
			<table id="pFolioTbl" class="ui-widget-content ui-corner-all">
			    <thead class="ui-widget-header">
			        <tr>
			        	<th width="11%"></th>
			        	<th width="13%">ID</th>
			        	<th width="13%">Price</th>
			        	<th width="13%">Units</th>
			        	<th width="20%">Value</th>
			        	<th width="30%"colspan="3" class="fixed120">Transaction</th>		<!--<th></th><th></th>-->
			        </tr>
			    </thead>
			    <!-- ko if: isUpToDate -->
			    <tbody data-bind="foreach: portfolio" class="dsp-none">
			        <tr>
			           	<td width="11%" data-bind="css:{'DW': $data.classDwn, 'UP': $data.classUp}"class="numb">
			           			<span data-bind="text: $data.lastMove"></span>%
			           	</td>
			            <td width="13%" data-bind="text: $data.ID" class=""></td>
			            <td width="13%" data-bind="text: $data.currPr"class="numb"></td>
			            <td width="13%" data-bind="text: $data.stake" class="numb"></td>
			            <td width="20%" data-bind="text: $data.currValue" class="numb"></td>
			            <td width="12%" data-bind="css:{'red': $data.illegal}">
			            	<input class="inputValue" type="text" data-bind="value: $data.evaluate, valueUpdate: 'keyup', hasfocus: true"/>
			            </td>
			            <td width="9%">
			            	<button data-bind="click: buy, enable: legalBuy, css:{'enabled': legalBuy }" id="buyBtn" class="transActBtn btnBuy">Buy</button>
			            </td>
			            <td width="9%">
			            	<button data-bind="click: sell, enable: legalSell, css:{'enabled': legalSell}" id="sellBtn" class="transActBtn btnSell">Sell</button>
			            </td>
			            
			            <!--
			            <td data-bind="text: $data.legalBuy"></td>
			            <td data-bind="text: $data.legalSell"></td>
			            -->
			        </tr>
			        <!---->
			    </tbody>
			    <!-- /ko -->
			</table>
		</fieldset>	
	</div>
	
	<div id="traders" class=" chat">
		 <fieldset class="chat ui-corner-all"><legend>Trader Chat</legend>
		 		<!--Disabled for selecting because incdividual chat is not implemented -->
			 <select id="form_traders" name="form-traders" class="ui-widget-content" multiple="multiple" height="6" data-bind="options: traders, optionsText: 'name'" ></select>
			 <div class="splitParent">
			 	<div class="splitter splitter70">
			 		<textarea id="text-input" class="" rows="2"></textarea>
			 	</div>
			 	<div class="splitter splitter30">
			 		<button class="btn" id="send-button">Send</button>
			 	</div>
			 </div>
			 <div id="messages" class="ui-widget-content ui-corner-all" ></textarea>
		 </fieldset>
	</div>
</div>
<!--Try to get around these ticker issues, rethinl store it here as a line hidden and then jsut steal it with jquery for the marque -->
<div id="stocks" class="dsp-none" >
<ul id="stocksList" class="dsp-none">
			<!-- ko foreach: equities-->
        	<li>
        		<span id="eq-id" data-bind="text: $data.ID"></span>
        		&nbsp;<span id="eq-currPr" data-bind="text: $data.currPr"></span>
        		&nbsp;<span id="eq-direction" data-bind="text: $data.direction"></span>
        		&nbsp;<span id="eq-lastMove" data-bind="text: $data.lastMove"></span>&#37;&nbsp;
      		</li>
      		<!-- /ko -->	
			</ul>	  
</div>
<ul id="tickerTemp" class="dsp-none">
</ul>
<script type="text/javascript" src="scripts/clientside.js"></script>
</body>
</html>